<template>
  <div class="margin-container-list">

    <!-- 平台类型 -->
    <third-platform-head :showKuaiShouIcon="false"
      :showTaoBaoIcon="false"
      :showPinDuoDuoIcon="false"
      :showTmallIcon="false"
      @platformTypeChange="platformTypeChange">
    </third-platform-head>
    
    <!--顶部搜索 -->
    <div class="top-operate pad-t-15">
      <div>
        <div class="pad-t-10">
          <el-select v-model="shopId" placeholder="所属店铺" @change="doChangeShop">
            <el-option v-for="item in shopList" :key="item.shopId" :label="item.shopName" :value="item.shopId">
            </el-option>
          </el-select>
          <el-button type="primary" class="mar-l-10" @click="doSync">同步分类</el-button>
        </div>
      </div>
    </div>

    <!-- 内容列表 -->
    <div class="table-container">
      <el-table :data="dataList" row-key="categoryId" v-loading="listLoading" element-loading-text="加载中" border>
        <el-table-column label="分类名称" prop="label">
          <template slot-scope="scope">
            <span>{{ scope.row.label }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
   
  </div>
</template>

<script>
  import { listThirdShop } from '@/api/user/third-shop'
  import { getThirdCategoryTree, doSyncCategory } from '@/api/goods/thirdCategory'
  
  import thirdAuth from '../components/third-auth'
  import thirdPlatformHead from '../components/third-platform-head'

  export default {
    components: { thirdPlatformHead },
    mixins: [thirdAuth],
    data() {
      return {
        // 平台类型
        platformType: 1,
        // 店铺id
        shopId: '',
        // 店铺集合
        shopList: [],
        // 抖音分类列表
        dataList: [],
        listLoading: false
      }
    },
    // 初始化页面
    created() {
      this.initListThirdShop()
    },
    mounted() {
    },
    methods: {
      // 平台类型切换事件
      platformTypeChange(platformType) {
        this.platformType = platformType
        this.initListThirdShop()
      },
      // 获取第三方店铺列表
      initListThirdShop() {
        const params = {
          enterpriseId: this.getEnterpriseId(),
          memberId: this.getMemberId(),
          platformType: this.platformType
        }
        listThirdShop(params).then(response => {
          if (response.isError) return
          if (response.data) {
            this.shopId = response.data[0] && response.data[0].shopId
            this.shopList = response.data
          }
          if (this.shopId) {
            this.init()
          }
        })
      },
      // 获取抖音分类列表
      init() {
        this.listLoading = true
        if (!this.shopId) {
          this.$message({ type: 'error', message: '请选择店铺' })
          return
        }
        getThirdCategoryTree(this.platformType, this.shopId).then(response => {
          this.listLoading = false
          this.dataList = response.data
        })
      },
      // 切换店铺事件
      doChangeShop() {
        this.init()
      },
      // 同步事件
      doSync() {
        if (!this.shopId) {
          this.$message({ type: 'error', message: '请选择店铺' })
          return
        }
        const redirectUrl = '/#/' + (this.getMemberId() ? 'shop' : 'channel') + '/dou-yin-category/index?platformType=' + this.platformType
        // 校验access_token是否存在
        this.checkAccessToken(this.platformType, this.shopId, redirectUrl, true).then(response => {
          if (response) {
            this.$confirm('下载数据量可能会比较大，需要耐心等候处理，确定下载？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.listLoading = true
              doSyncCategory(this.platformType, this.shopId).then(response => {
                this.listLoading = false
                if (response.isError) return
                this.$message({ message: '后台正在同步中，请稍后刷新页面......', type: 'success' })
              })
            }).catch(() => {
              this.$message({ type: 'info', message: '已取消' })
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
